<!-- 赛事基础设置 -->
<template>
  <el-form
    ref="api_POST_CompetitionSettingVO"
    v-loading="loading"
    :model="api_POST_CompetitionSettingVO"
    label-width="130px"
    size="mini"
  >
    <el-row :gutter="15">
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="允许个人报名">
          <el-select v-model="api_POST_CompetitionSettingVO.allowPersonalEntry" placeholder="请选择是否允许个人报名" style="width: 100%;">
            <el-option :key="true" :value="true" label="允许" />
            <el-option :key="false" :value="false" label="不允许" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="展示参赛数据">
          <el-select v-model="api_POST_CompetitionSettingVO.showEntryData" placeholder="请选择是否展示参赛数据" style="width: 100%;">
            <el-option :key="true" :value="true" label="展示" />
            <el-option :key="false" :value="false" label="不展示" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="真实照片未上传">
          <el-select v-model="api_POST_CompetitionSettingVO.allowEntryWithNoImage" placeholder="请选择" style="width: 100%;">
            <el-option :key="true" :value="true" label="可参赛" />
            <el-option :key="false" :value="false" label="不可参赛" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4">
        <el-form-item label="填写报名须知">
          <el-input v-model="api_POST_CompetitionSettingVO.entryNotice" type="textarea" :autosize="{ minRows: 1, maxRows: 5 }" placeholder="请填写报名须知" />
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item gl_mb_20">
        <el-alert title="注：报名须知填写过后，将会在报名的界面提示报名人员" :closable="false" type="error" />
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="是否线上比赛">
          <el-select v-model="api_POST_CompetitionSettingVO.isOnline" placeholder="请选择是否线上比赛" style="width: 100%;">
            <el-option :key="true" :value="true" label="线上比赛" />
            <el-option :key="false" :value="false" label="非线上比赛" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="赛事是否收费">
          <el-select v-model="api_POST_CompetitionSettingVO.isFree" placeholder="请选择赛事是否收费" style="width: 100%;" @change="clickisFree">
            <el-option :key="true" :value="true" label="免费" />
            <el-option :key="false" :value="false" label="收费" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="赛事人数限制">
          <el-select v-model="isMaxEntryRegistersCount" style="width: 100%;">
            <el-option :key="false" :value="false" label="不限制" />
            <el-option :key="true" :value="true" label="限制" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="isMaxEntryRegistersCount" :span="4" class="form_item">
        <el-input-number v-model="api_POST_CompetitionSettingVO.maxEntryRegistersCount" :precision="0" placeholder="请输入数字" size="mini" controls-position="right" :min="1" :max="99999" style="width:70%" />
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="参赛队伍人数限制">
          <el-select v-model="isMaxEntryRegistersCountPerDelegation" style="width: 100%;">
            <el-option :key="false" :value="false" label="不限制" />
            <el-option :key="true" :value="true" label="限制" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="显示会员信息">
          <el-radio-group v-model="api_POST_CompetitionSettingVO.isDisplayMemberInfo">
            <el-radio :label="false">不显示</el-radio>
            <el-radio :label="true">显示</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="会员报名限制">
          <el-radio-group v-model="api_POST_CompetitionSettingVO.isEntryMemberRule">
            <el-radio :label="false">不限制</el-radio>
            <el-radio :label="true">限制</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="赛事发布">
          <el-radio-group v-model="api_POST_CompetitionSettingVO.publishingIsFree" :disabled="api_POST_CompetitionSettingVO.isFree">
            <el-radio :label="false">付费发布</el-radio>
            <el-radio :label="true">免费发布</el-radio>
          </el-radio-group>
          <!-- <span v-if="api_POST_CompetitionSettingVO.publishingIsFree===true" style="margin-left: 100px;">
            <span style="font-size: 16px;font-weight: 800;color: #606266;">
              报销费
            </span>
            <span>
              平台统一购买{{ amount?amount:0 }}元 / 人
            </span>
          </span> -->
        </el-form-item>
      </el-col>

      <el-col v-if="api_POST_CompetitionSettingVO.publishingIsFree===true" :span="16" :offset="4" class="form_item">
        <span>
          <el-form-item label="保险费">
            <span style="color: red;">
              保险费{{ amount?amount:0 }}元 / 人,由参赛机构直接支付给平台,平台统一购买
             </span>
          </el-form-item>
        </span>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="赛事执行密码" prop="password">
          <el-radio v-model="password" label="no" @input="openpassword">不使用</el-radio>
          <el-radio v-model="password" label="yes" style="margin-right: 32px" @input="openpassword">使用</el-radio>
          <el-input v-if="password==='yes'" ref="password" v-model="api_POST_CompetitionSettingVO.password" placeholder="请输入密码" maxlength="10" style="width: 69%;" :type="passwordType" />
          <span v-if="password==='yes'" class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label="领队教练名单限制" prop="password">
          <!-- <el-radio-group v-model="api_POST_CompetitionSettingVO.isEntryWhiteList">
            <el-radio :label="false">不限制</el-radio>
            <el-radio :label="true" style="margin-right: 32px">限制</el-radio>
          </el-radio-group> -->

          <el-select v-model="api_POST_CompetitionSettingVO.isEntryWhiteList" placeholder="领队教练名单限制" style="width: 80%;" >
              <el-option :key="false" :value="false" label="不限制" />
              <el-option :key="true" :value="true" label="限制" />
          </el-select>
          <el-button type="primary" size="mini" @click="openwhiteList" style="margin-left: 10px;">添加人员</el-button>
        </el-form-item>
      </el-col>
      <el-col v-if="isMaxEntryRegistersCountPerDelegation" :span="4" class="form_item">
        <el-input-number v-model="api_POST_CompetitionSettingVO.maxEntryRegistersCountPerDelegation" :precision="0" placeholder="请输入数字" size="mini" controls-position="right" :min="1" :max="99999" style="width:70%" />
      </el-col>
    </el-row>
    <el-row v-for="(item, index) in api_POST_CompetitionSettingVO.entryFields" :key="index" :gutter="15">
      <el-col :span="16" :offset="4" class="form_item">
        <el-form-item label-width="0">
          <el-input v-model="item.name" placeholder="请输入自定义名称">
            <template slot="append">
              <el-select v-model="item.isRequired" placeholder="是否填写" style="width: 100px;">
                <el-option :key="true" :value="true" label="必填" />
                <el-option :key="false" :value="false" label="非必填" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col v-if="api_POST_CompetitionSettingVO.entryFields.length - 1 === index" :span="4" class="form_item">
        <el-button type="default" size="mini" @click="addEntryFields">自定义字段</el-button>
      </el-col>
      <el-col v-else :span="4" class="form_item">
        <el-button type="danger" size="mini" @click="deleteEntryFields(index)">删除</el-button>
      </el-col>
    </el-row>
    <whiteList ref="refwhiteList" />
  </el-form>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { CopyData, deepCopy } from '@/lib';
import { SiSTKWEventsManagementCreateCompetitionSettingInput } from '@/lib/form/game/swaggerForm';
import {
  api_POST_EventsManagementCompetitionSetting,
  api_PUT_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId,
  api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId
} from '@/extend/api/gameswaggerApi/app';
import {
  api_GET_EventsManagementInsuranceChargeSetting
} from '@/extend/api/game.js'; // api接口
import  whiteList  from './whiteList'
export default {
  name: 'GameSetting',
  props: {
    gameId: {
      type: String,
      required: false,
      default: ''
    }
  },
  components: {
    whiteList
  },
  data() {
    return {
      amount: '',
      passwordType: 'password',
      password: 'no', // 赛事执行密码
      loading: false,
      api_POST_CompetitionSettingVO: new SiSTKWEventsManagementCreateCompetitionSettingInput(),
      // 原始数据
      api_POST_CompetitionSettingVO_old: {},
      api_POST_CompetitionSettingDTO: {},
      isMaxEntryRegistersCount: false,
      isMaxEntryRegistersCountPerDelegation: false,
      rules: {
        password: [
          { message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 8 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  watch: {
    // 赛事人数限制
    isMaxEntryRegistersCount: function(val) {
      const _this = this;
      if (val) {
        _this.api_POST_CompetitionSettingVO.maxEntryRegistersCount = _this.api_POST_CompetitionSettingDTO.maxEntryRegistersCount || 1;
      } else {
        _this.api_POST_CompetitionSettingVO.maxEntryRegistersCount = null;
      }
    },
    // 参赛队伍人数限制
    isMaxEntryRegistersCountPerDelegation: function(val) {
      if (val) {
        this.api_POST_CompetitionSettingVO.maxEntryRegistersCountPerDelegation = this.api_POST_CompetitionSettingDTO.maxEntryRegistersCountPerDelegation || 1;
      } else {
        this.api_POST_CompetitionSettingVO.maxEntryRegistersCountPerDelegation = null;
      }
    }
  },
  created() {
    this.getDict();
    if (this.password === 'no') {
      this.api_POST_CompetitionSettingVO.password = '';
    } else {
      this.api_POST_CompetitionSettingVO.password = null;
    }
    if (this.gameId) {
      this.getGameSetting().then(() => {
        CopyData(this.api_POST_CompetitionSettingDTO, this.api_POST_CompetitionSettingVO);
        this.api_POST_CompetitionSettingVO.insuranceCode === '';
        this.isMaxEntryRegistersCount = !!this.api_POST_CompetitionSettingDTO.maxEntryRegistersCount;
        this.isMaxEntryRegistersCountPerDelegation = !!this.api_POST_CompetitionSettingDTO.maxEntryRegistersCountPerDelegation;
        this.api_POST_CompetitionSettingVO.entryFields = this.api_POST_CompetitionSettingDTO.entryFields && this.api_POST_CompetitionSettingDTO.entryFields.items || [];
        this.addEntryFields();
        this.api_POST_CompetitionSettingVO_old = deepCopy(this.api_POST_CompetitionSettingVO);
      });
    } else {
      this.addEntryFields();
      this.api_POST_CompetitionSettingVO_old = deepCopy(this.api_POST_CompetitionSettingVO);
    }
    api_GET_EventsManagementInsuranceChargeSetting().then(res => {
      if (res) {
        this.amount = (res.amount / 100).toFixed(2);
        console.log(this.amount, ';;;;');
      }
    }).catch(res => {
      that.$message({
        message: '查询保险费用设置 ' + res.error.message,
        type: 'error'
      });
    });
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 是否使用密码
    openpassword() {
      if (this.password === 'no') {
        this.api_POST_CompetitionSettingVO.password = '';
      } else {
        this.api_POST_CompetitionSettingVO.password = null;
      }
    },
    // 是否免费发布
    clickisFree(val) {
      if (val) {
        this.api_POST_CompetitionSettingVO.publishingIsFree = false;
      }
    },
    // 验证当前页面是否经过修改且尚未提交
    validSameData() {
      return new Promise(resolve => {
        if (JSON.stringify(this.api_POST_CompetitionSettingVO_old) === JSON.stringify(this.api_POST_CompetitionSettingVO)) {
          resolve(true);
        } else {
          resolve(false);
        }
      });
    },
    submit() {
      return new Promise((resolve, reject) => {
        this.$refs.api_POST_CompetitionSettingVO.validate(valid => {
          if (!valid) {
            reject(false);
            return;
          }
          this.api_POST_CompetitionSettingVO.competitionId = this.gameId;
          if (this.api_POST_CompetitionSettingDTO.id) {
            this.editGameSetting(this.handleEntryFieldsWidthSubmit()).then(res => {
              resolve(res);
            }, error => {
              reject(error);
            });
          } else {
            this.addGameSetting(this.handleEntryFieldsWidthSubmit()).then(res => {
              resolve(res);
            }, error => {
              reject(error);
            });
          }
        });
      });
    },
    // 处理提交时自定义字段中为空的情况
    handleEntryFieldsWidthSubmit() {
      const api_POST_CompetitionSettingVO = deepCopy(this.api_POST_CompetitionSettingVO);
      api_POST_CompetitionSettingVO.entryFields = api_POST_CompetitionSettingVO.entryFields.filter(item => item.name);
      return api_POST_CompetitionSettingVO;
    },
    // 新增自定义字段
    addEntryFields() {
      const entryFieldItem = {
        name: '',
        isRequired: false,
        isCustom: true,
        fieldTypeCode: 'String',
        competitionId: this.gameId
      };
      this.api_POST_CompetitionSettingVO.entryFields.push(entryFieldItem);
    },
    // 删除自定义字段
    deleteEntryFields(index) {
      this.api_POST_CompetitionSettingVO.entryFields.splice(index, 1);
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    // 根据赛事id获取赛事配置
    getGameSetting() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId(this.gameId).then(res => {
          this.loading = false;
          this.api_POST_CompetitionSettingDTO = res || {};
          if (this.api_POST_CompetitionSettingDTO.hasPassword) {
            this.password = 'yes';
          }
          resolve(res);
        }, error => {
          this.loading = false;
          reject(error);
          this.$message({ type: 'error', message: '获取赛事基础设置失败！' });
        });
      });
    },
    // 新增赛事基础设置
    addGameSetting(api_POST_CompetitionSettingVO) {
      return new Promise((resolve, reject) => {
        api_POST_CompetitionSettingVO.leagueFinalPromotionTypeCode = api_POST_CompetitionSettingVO.leagueFinalPromotionTypeCode ? api_POST_CompetitionSettingVO.leagueFinalPromotionTypeCode : null;
        api_POST_EventsManagementCompetitionSetting(api_POST_CompetitionSettingVO).then(res => {
          resolve(res);
          this.$message({ type: 'success', message: '新增赛事基础设置成功！' });
          this.api_POST_CompetitionSettingVO_old = deepCopy(this.api_POST_CompetitionSettingVO);
          this.api_POST_CompetitionSettingDTO = res || {};
        }, error => {
          reject(error);
          this.$message({ type: 'error', message: '新增赛事基础设置失败！' + (error.error && error.error.message || '') });
        });
      });
    },
    openwhiteList() {
      this.$refs.refwhiteList.gameId = this.gameId;
      this.$refs.refwhiteList.dialogVisible = true;
      this.$refs.refwhiteList.getPageList();
    },
    // 更新赛事基础设置
    editGameSetting(api_POST_CompetitionSettingVO) {
      return new Promise((resolve, reject) => {
        api_POST_CompetitionSettingVO.leagueFinalPromotionTypeCode = api_POST_CompetitionSettingVO.leagueFinalPromotionTypeCode ? api_POST_CompetitionSettingVO.leagueFinalPromotionTypeCode : null;
        api_PUT_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId(this.gameId, api_POST_CompetitionSettingVO).then(res => {
          resolve(res);
          this.$message({ type: 'success', message: '更新赛事基础设置成功！' });
          this.api_POST_CompetitionSettingVO_old = deepCopy(this.api_POST_CompetitionSettingVO);
        }, error => {
          reject(error);
          this.$message({ type: 'error', message: '更新赛事基础设置失败！' + (error.error && error.error.message || '') });
        });
      });
    }
  }
};
</script>
<style scoped>
::v-deep .el-form-item__error {
    left: 180px;
}
.show-pwd {
    position: absolute;
    right: 19px;
    top: 2px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
